<script setup>
import {Plus, RefreshLeft, Search} from "@element-plus/icons-vue";
import {reactive, ref, watch} from "vue";
import requestUtil from "@/utils/request";
import groupDialog from "@/views/alertCenter/alertContactGroup/components/groupDialog.vue";
import {ElMessage} from "element-plus";

const queryForm = ref({
  query: '',
  pageNum: 1,
  pageSize: 10,
})

const total = ref(0)

const tableData = ref([])

const tableProps = reactive({
  checkStrictly: false,
})

const groupDialogVisible = ref(false)
const groupDialogTitle = ref("")
const groupID = ref(-1)

const handleGroupDialogValue = (id) => {
  if (id) {
    groupID.value = id
    groupDialogTitle.value = '修改联系组'
    groupDialogVisible.value = true
  } else {
    groupID.value = -1
    groupDialogTitle.value = '新建联系组'
    groupDialogVisible.value = true
  }
}

const initTableData = async () => {
  try {
    const res = await requestUtil.post('monitor_alert/group/list', queryForm.value)
    const data = res.data
    if (data.code === 200) {
      tableData.value = data.msg;
      total.value = data.total;
    } else {
      ElMessage.error(data.msg)
    }
  } catch (error) {
    console.error('Error fetching table data:', error)
    ElMessage.error('请求失败，请稍后再试')
  }
}
initTableData()

const handleDelete = async (id) => {
  try {
    const res = await requestUtil.del('monitor_alert/alert/group/action', {"groupID": id})
    const data = res.data
    if (data.code === 200) {
      ElMessage.success("删除成功")
      await initTableData()
    } else {
      ElMessage.error(data.msg)
    }
  } catch (error) {
    console.error('Error fetching table data:', error)
    ElMessage.error('请求失败，请稍后再试')
  }
}

const handleSizeChange = (pageSize) => {
  queryForm.value.pageNum = 1
  queryForm.value.pageSize = pageSize
  initTableData()
}

const handleCurrentChange = (pageNum) => {
  queryForm.value.pageNum = pageNum
  initTableData()
}


watch(
    () => queryForm.value.statusID,
    () => {
      initTableData()
    }
)
</script>

<template>
  <div class="app-container">
    <el-card class="box-card">
      <template v-slot:header>
        <div class="space-between">
          <div>
            <el-text class="width-class">联系组:</el-text>
            <el-input class="width-class" style="width: 300px" placeholder="请输入联系组..." v-model="queryForm.query"
                      clearable></el-input>
            <el-button type="primary" :icon="Search" @click="initTableData">搜索</el-button>
          </div>

          <div class="radio-container">
            <el-button :icon="Plus" type="primary" @click="handleGroupDialogValue()">新建
            </el-button>
            <el-button link @click="initTableData()" class="btn-link">
              <template #icon>
                <RefreshLeft/>
              </template>
            </el-button>
          </div>
        </div>
      </template>


      <el-table :data="tableData"
                :tree-props="tableProps"
                row-key="id"
                height="600px"
                stripe
                style="width: 100%"
      >
        <el-table-column prop="name" label="组名称" min-width="25%" align="center"/>
        <el-table-column prop="person_num" label="组成员" min-width="25%" align="center"/>
        <el-table-column prop="remark" label="描述" min-width="25%" align="center"/>

        <el-table-column prop="action" label="操作" min-width="25%" fixed="right" align="center">
          <template v-slot="scope">
            <el-button type="primary" @click="handleGroupDialogValue(scope.row.id)">编辑
            </el-button>

            <el-popconfirm v-if="scope.row.code !=='admin'" title="你确定要删除该联系人吗？"
                           @confirm="handleDelete(scope.row.id)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <groupDialog v-model="groupDialogVisible" :tableData="tableData" :id="groupID"
                 :dialogVisible="groupDialogVisible" :dialogTitle="groupDialogTitle"
                 @initTableData="initTableData"></groupDialog>
  </div>
  <el-pagination
      :hide-on-single-page="true"
      v-model:current-page="queryForm.pageNum"
      v-model:page-size="queryForm.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
  />
</template>

<style scoped lang="scss">
.space-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;

  .width-class {
    margin-right: 10px;
  }

  .radio-container {
    display: flex;
    justify-content: flex-end;

    .btn-link {
      margin-left: 20px;
      font-weight: bold;
      font-size: 26px;
    }
  }
}

.el-pagination {
  float: right;
  padding: 20px;
  box-sizing: border-box;
}

:deep(th.el-table__cell) {
  word-break: break-word;
  color: var(--text-color);
  height: 40px;
  font-size: 13px;
}

.el-tag--small {
  margin-left: 5px;
}
</style>
